<template>
  <div>
     <h1>发现</h1>
    <div class="buttons">
      <div :class="['button', index===currentIndex?'active':'']" :value="item" @click="toggle(index,$event)" v-for="(item,index) in showBtn" :key="index">
        {{item.name}}
      </div>
      <div :class="['button more',flag?'active':'']"  @click="toggle1">
        <svg-icon icon-class="more" class="svg-icon"></svg-icon>
      </div>
    </div>
    <div class="panel" :style="{'display':display}" >
      <div class="big-cat" v-for="(item,index) in panelCategory" :key="index">
        <div class="name">{{item}}</div>
        <div class="cats">
          <div :class="['cat', {'active':showBtn.find(item => item.name === it.name)?true:false}]" v-for="(it,i) in showBtnCategory[`${item}`]" :key="i">
            <span @click="filterCategory(it.name)">{{it.name}}</span>
          </div>
        </div>
      </div>
  </div>
  </div>
</template>

<script>
import { playlistCategories } from '../../../mock/data';

export default {
  name: 'PlaymusicExploreheader',
  data() {
    return {
      panelShowBtn: [],
      showBtnCategory: {},
      panelCategory: ['语种', '风格', '场景', '情感', '主题'],
      flag: false,
      currentIndex: 0,
      showBtn: [],
      playlistCategories,
      display: 'none',
    };
  },
  created() {
    const language = [];
    const styles = [];
    const scene = [];
    const emotion = [];
    const theme = [];
    this.playlistCategories.filter(item => this.panelCategory.indexOf(item.bigCat) > -1)
      .forEach((it) => {
        if (it.bigCat === '语种') {
          language.push(it);
          this.showBtnCategory['语种'] = language;
        } else if (it.bigCat === '风格') {
          styles.push(it);
          this.showBtnCategory['风格'] = styles;
        } else if (it.bigCat === '场景') {
          scene.push(it);
          this.showBtnCategory['场景'] = scene;
        } else if (it.bigCat === '情感') {
          emotion.push(it);
          this.showBtnCategory['情感'] = emotion;
        } else if (it.bigCat === '主题') {
          theme.push(it);
          this.showBtnCategory['主题'] = theme;
        }
      });
    this.showBtn = playlistCategories.filter(item => item.enable);
  },
  mounted() {
  },
  methods: {
    toggle1() {
      this.flag = true;
      this.currentIndex = '';
      if (this.display === 'block') {
        this.display = 'none';
      } else {
        this.display = 'block';
      }
    },
    toggle(index, e) {
      this.currentIndex = index;
      this.flag = false;
      this.display = 'none';
      this.$emit('click', e.target.textContent.trim());
    },
    filterCategory(btnName) {
      if (this.showBtn.every(item => item.name !== btnName)) {
        this.showBtn.push(this.playlistCategories.find(item => item.name === btnName));
      } else {
        const index = this.showBtn.findIndex(item => item.name === btnName);
        this.showBtn.splice(index, 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
h1{
    color: var(--color-text);
    font-size: 56px;
    font-weight: bold;
}
.buttons  {
    display: flex;
    flex-wrap: wrap;
}
.button.active , .button:hover {
    background-color: var(--color-primary-bg);
    color: var(--color-primary);
}
.button  {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 8px 16px;
    margin: 10px 16px 6px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 18px;
    border-radius: 10px;
    background-color: var(--color-secondary-bg);
    color: var(--color-secondary);
    transition: .2s;
}
.playlists{
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 44px 24px;
}
button {
    background: none;
    border: none;
    cursor: pointer;
}
button, select {
    font-family: inherit;
}
/deep/ p{
  margin-bottom:0px;
}
.panel {
    margin-top: 10px;
    background: var(--color-secondary-bg);
    border-radius: 10px;
    padding: 8px;
    color: var(--color-text);
}
.panel .big-cat {
    display: flex;
    margin-bottom: 32px;
}
.panel .name {
    font-size: 24px;
    font-weight: 700;
    opacity: .68;
    margin-left: 24px;
    min-width: 54px;
    height: 26px;
    margin-top: 8px;
}
.panel .cats {
    margin-left: 24px;
    display: flex;
    flex-wrap: wrap;
}
.panel .cat {
    user-select: none;
    margin: 4px 0 0 0;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    transition: .2s;
    min-width: 98px;
}
.panel .cat.active {
    color: var(--color-primary);
}
.panel .cat span {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 6px 12px;
    height: 38px;
    border-radius: 5px;
    opacity: .88;
}
.panel .cat span:hover {
    opacity: 1;
    background-color: var(--color-primary-bg);
    color: var(--color-primary);
}
</style>
